<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="textMap[dialogStatus]"
    width="600px">
    <el-form ref="dataForm" label-width="150px" :rules="rules" :model="dataForm">
      <el-form-item v-if="isAdmin" label="所属码头" prop="portId">
        <port-tree-select :handle-selected="handleSelected" :portIdValue="dataForm.portId"></port-tree-select>
      </el-form-item>
      <el-form-item label="集装箱/提单号" prop="recordNo">
        <el-select style="width:115px;" v-model="dataForm.type">
          <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.label"></el-option>
        </el-select>
        <el-input type="text" style="width:200px;" placeholder="请填写集装箱号/散货提单号" v-model="dataForm.recordNo"></el-input>
      </el-form-item>
      <!--<el-form-item label="加锁时间 " prop="time">-->
      <!--<el-date-picker-->
      <!--v-model="dataForm.time"-->
      <!--type="datetimerange"-->
      <!--align="right"-->
      <!--start-placeholder="开始日期"-->
      <!--end-placeholder="结束日期"-->
      <!--value-format="yyyy-MM-dd HH:mm:ss">-->
      <!--</el-date-picker>-->
      <!--</el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import PortTreeSelect from '@/components/PortTreeSelect'
  import { addLock } from '@/api/eLock'
  export default {
    name: 'directiveDialog',
    components: {
      PortTreeSelect
    },
    props: {
      callBack: {
        type: Function
      }
    },
    data(){
      return {
        dialogVisible: false,
        isAdmin: this.$store.getters.isAdmin,
        rules: {
          portId: {required: true, message: '请选择码头'},
          recordNo: {required: true, message: '请填写箱号/提单号'},
          time: {required: true, message: '请选择时间'}
        },
        dialogStatus: 'create',
        textMap: {
          update: '修改加锁下达',
          create: '新建加锁下达'
        },
        dataForm: {
          portId: null,
          recordNo: null,
          type: 1
        },
        options: [
          {label: '集装号', value: 1},
          {label: '散货提单号', value: 2}
        ]
      }
    },
    methods: {
      handleCreate() {
        this.dialogStatus = 'create'
        this.dialogVisible = true
      },
      handleEdit(obj){
        this.dialogStatus = 'update'
        this.dialogVisible = true
        console.log(obj)
        this.dataForm = {
          portId: obj.portId,
          recordNo: obj.recordNo,
          type: obj.recordType
        }
      },
      handleSelected(node){
        this.dataForm.portId = node.id
        this.$refs['dataForm'].validateField('portId')
      },
      submit(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addLock(this.dataForm).then(res => {
              res = res.data
              this.$message({showClose: true, message: '创建成功', type: 'success'});
              this.dialogVisible = false
            })
          }
        })
      }
    }
  }
</script>
